<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="./lib/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例',
                link: 'https://echarts.apache.org/zh/tutorial.html',
                textStyle: {
                    color: 'red'
                }
            },
            tooltip: {//提示框组件，用于配置鼠标滑过或点击图表时的显示框
                trigger:'axis', //trigger触发类型 axis范围是轴，在轴上就可以显示
                triggerOn:'click',//触发时机 点击才有用
                formatter: function(arg) {/*字符串模板、 回调函数*/ 
                    return arg[0].name + '的销量是' + arg[0].data
                }
            },
            toolbox: {
                feature: {
                    saveAsImage: {},//导出图片
                    dataView:{},//数据视图
                    restore:{},//重置
                    dataZoom:{},//区域缩放
                    magicType:{
                        type:['bar', 'line']
                    }
                }
            },
            legend: { //图例，用于筛选系列，需要和series配合使用
                data:['销量']
            },
            xAxis: { //直角坐标系X轴
                data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
                boundaryGap:false //紧挨边缘
            },
            yAxis: {//直角坐标系Y轴
                scale:true //缩放：脱离0值比例
            }, 
            series: [{ //系列列表 给y轴提供数据
                type: 'line', 
                markLine: {
                    data: [
                        {
                            type:'average', name:'average'
                        }
                    ]
                },
                markArea: {
                    data:[
                        [{
                            xAxis:'1月'
                        },{
                            xAxis:'2月'
                        }]
                    ]
                },
                smooth:true,//平滑，
                lineStyle:{
                    color:'green',
                    // type:'dashed' //点线
                },
                areaStyle:{},//填充 
                stake:'all',//堆叠图
                data: [5000, 2000, 3600, 1000, 1000, 2000,1000,3500,6400,7500,7500]
            },
            { //系列列表 给y轴提供数据
                type: 'line', 
                markLine: {
                    data: [
                        {
                            type:'average', name:'average'
                        }
                    ]
                },
                smooth:true,//平滑，

                lineStyle:{
                    color:'green',
                },
                areaStyle:{},
                stake:'all',
                data: [500, 200, 3600, 100, 100, 200,10000,350,600,7500,700]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>